<template>
	<view class="root f1 oh">
		<view class="fd-row lh-80 bgc-2a62ff">
			<label
				class="tab f1 jc-center color-fff"
				v-for="(tab, index) in tabs"
				:key="index"
				:class="{ active: tabIndex === index }"
				@click="switchTab(index)"
			>
				{{ tab }}
			</label>
		</view>

		<scroll-view scroll-y class="f1 oh">
			<view class="height-40" />
			<block v-for="(product, index) in products" :key="index">
				<view
					class="product bgc-fff br-10"
					:style="{ margin: `0 30rpx 20rpx`, padding: `20rpx` }"
					data-status="进行中"
				>
					<text class="fs-32 color-1a1a1a">
						{{ product.name }}
					</text>
					<label class="fs-32 color-ff3608 lh-2 fw-500">
						{{ Number(product.price).toFixed(0) }} {{ product.shb }}
					</label>
					<view class="fd-row ai-center jc-sb">
						<text class="color-666 fs-24">
							{{ `生效日期 ${formatDate(product.addtime * 1000, "Y-M-D")}` }}
						</text>
						<navigator
							hover-class="tap-hover"
							:url="`/pages/product/productDetail?id=${product.id}&name=${product.name}&content=${product.content}&price=${product.price}`"
							:style="{ padding: `0 22rpx` }"
							class="bgc-2a62ff color-fff lh-42 fs-24 br-20"
						>
							立即购买
						</navigator>
					</view>
				</view>
				<view class="height-20" />
			</block>

			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script>
	import { formatDate } from "@/static/utils";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more";

	export default {
		components: { uniLoadMore },
		data() {
			return {
				tabs: ["USDT", "ETH", "BTC", "FIL"],
				tabIndex: -1,

				products: [],
				loadStatus: "loading",
			};
		},
		onLoad() {
			this.switchTab(0);
		},
		methods: {
			formatDate,
			switchTab(index) {
				this.tabIndex = index;

				this.loadStatus = "loading";
				this.$request
					.get("/Shop/Index/index", {
						type: this.tabs[this.tabIndex],
					})
					.then(({ data }) => {
						this.products = data;
					})
					.finally(() => (this.loadStatus = "noMore"));
			},
		},
	};
</script>

<style lang="scss" scoped>
	// scss
	@import "@/static/reset";

	.tab {
		position: relative;
		&.active::after {
			content: "";
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;
			width: 50rpx;
			height: 4rpx;
			background-color: #fff;
			border-radius: 2rpx;
		}
	}
	.product {
		position: relative;
		overflow: hidden;
		&::after {
			position: absolute;
			right: 0;
			top: 0;
			content: attr(data-status);
			background-color: #f39800;
			font-size: 20rpx;
			color: #fff;
			line-height: 30rpx;
			transform: rotate(45deg) translateX(30%);
			width: 160rpx;
			text-align: center;
		}
	}
</style>